<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>    


  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="robots" content="index,follow">
    <meta name="description" content="This object represents the pinnacle of my attempts to create a flexible and robustAjax object. It's small, compact, object oriented, easy to follow and can handle multiple, concurrent,simultaneous requests, something the hello world tutorials always seem to miss.It's also public domain so use it and abuse it however you like and don't sweat giving up any precious screen space to credit me.">
    <meta name="keywords" content="ajax, javascript, object, post, get">

    <title>The Ultimate Ajax Object</title>
 

    <!-- Set up a script tag for php to pass variables in -->
    <script src="The_Ultimate_Ajax_Object_files/ga.js" type="text/javascript"></script><script type="text/javascript">
var _articleAge=1357.6952199074
var _showAds=15
    
    </script>


    <!-- Load StyleSheets -->
    <link rel="stylesheet" type="text/css" href="The_Ultimate_Ajax_Object_files/common_v1.css" media="screen">
    <link rel="stylesheet" type="text/css" href="The_Ultimate_Ajax_Object_files/print_v1.css" media="print">

    <!-- Load common javascript -->
    <script type="text/javascript" src="The_Ultimate_Ajax_Object_files/common.js"></script>
    
    <!-- Let IE understand <q> tags -->
    <!--[if lte IE 7]>
      <style type="text/css">
        q        { behavior: url(http://www.hunlock.com/IEquotes.htc); }
      </style>
    <![endif]-->
    
    <!-- Link to our RSS feed -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.hunlock.com/feed.php">

    <!-- Local CSS file, just in case -->
    <style type="text/css">
       .adBar {}
    </style>
  <script src="The_Ultimate_Ajax_Object_files/run" type="text/javascript"></script></head><body class="body">

  <div id="header" class="header noprint">
     <a href="http://www.hunlock.com/"><div class="button">BLOG</div></a>
     <a href="http://www.hunlock.com/archives.php"><div class="button">ARCHIVES</div></a>

     <div id="clock" class="clock">Friday, November 26 2010<br>12:16:36 AM</div>
  </div>  
  <table style="table-layout: fixed; min-width: 1000px;" width="100%" cellpadding="0" cellspacing="0">
    <tbody><tr><td class="artWidth"></td><td></td></tr>
<tr><td valign="top">

<div class="article"><h1>The Ultimate Ajax Object</h1>
<div class="infoBar">Filed: Thu, Mar 08 2007 under Programming|| Tags: ajax javascript object post get</div><p>In my recent article 
<q><a href="http://www.hunlock.com/blogs/Ten_Javascript_Tools_Everyone_Should_Have">Ten Javascript Tools Everyone Should Have</a></q>
I offered an AJAX object as the 10th tool.  After publication, I received quite a number of requests to document 
the object, and so document it I shall.
</p><h4><a name="quickIDX0"></a>Introduction</h4>
<p>This object represents the pinnacle of my attempts to create a flexible and robust
Ajax object. It's small, compact, object oriented, easy to follow and can handle multiple, concurrent,
simultaneous requests, something the <q>hello world</q> tutorials always seem to miss.
It's also public domain so use it and abuse it however you like and don't sweat 
giving up any precious screen space to credit me.

So without further ado, here's the Ajax object. The documentation follows.
</p><h4><a name="quickIDX1"></a>An Object Lesson</h4>
<pre class="code" onclick="selectNode(this)"><span class="kwd">function</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="pln">url</span><span class="pun">,</span><span class="pln"> callbackFunction</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> that</span><span class="pun">=</span><span class="kwd">this</span><span class="pun">;</span><span class="pln"> &nbsp; &nbsp; &nbsp;<br>&nbsp; </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">updating </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br>&nbsp; </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">abort </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">that</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">=</span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">abort</span><span class="pun">();</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">=</span><span class="kwd">null</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br>&nbsp; </span><span class="pun">}</span><span class="pln"><br>&nbsp; </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">update </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">passData</span><span class="pun">,</span><span class="pln">postMethod</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> <br>&nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">that</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"><br>&nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">window</span><span class="pun">.</span><span class="typ">XMLHttpRequest</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">XMLHttpRequest</span><span class="pun">();</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ActiveXObject</span><span class="pun">(</span><span class="str">"Microsoft.XMLHTTP"</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">==</span><span class="kwd">null</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">onreadystatechange </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">readyState</span><span class="pun">==</span><span class="lit">4</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">=</span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">callback</span><span class="pun">(</span><span class="pln">that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">responseText</span><span class="pun">,</span><span class="pln">that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">status</span><span class="pun">,</span><span class="pln">that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">responseXML</span><span class="pun">);</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">=</span><span class="kwd">null</span><span class="pun">;</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">updating </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">();</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(/</span><span class="pln">post</span><span class="pun">/</span><span class="pln">i</span><span class="pun">.</span><span class="pln">test</span><span class="pun">(</span><span class="pln">postMethod</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> uri</span><span class="pun">=</span><span class="pln">urlCall</span><span class="pun">+</span><span class="str">'?'</span><span class="pun">+</span><span class="pln">that</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">.</span><span class="pln">getTime</span><span class="pun">();</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">open</span><span class="pun">(</span><span class="str">"POST"</span><span class="pun">,</span><span class="pln"> uri</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">setRequestHeader</span><span class="pun">(</span><span class="str">"Content-type"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"application/x-www-form-urlencoded"</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">setRequestHeader</span><span class="pun">(</span><span class="str">"Content-Length"</span><span class="pun">,</span><span class="pln"> passData</span><span class="pun">.</span><span class="pln">length</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">send</span><span class="pun">(</span><span class="pln">passData</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> uri</span><span class="pun">=</span><span class="pln">urlCall</span><span class="pun">+</span><span class="str">'?'</span><span class="pun">+</span><span class="pln">passData</span><span class="pun">+</span><span class="str">'&amp;timestamp='</span><span class="pun">+(</span><span class="pln">that</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">.</span><span class="pln">getTime</span><span class="pun">());</span><span class="pln"> <br>&nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">open</span><span class="pun">(</span><span class="str">"GET"</span><span class="pun">,</span><span class="pln"> uri</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">);</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; that</span><span class="pun">.</span><span class="pln">AJAX</span><span class="pun">.</span><span class="pln">send</span><span class="pun">(</span><span class="kwd">null</span><span class="pun">);</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; </span><span class="pun">}</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> urlCall </span><span class="pun">=</span><span class="pln"> url</span><span class="pun">;</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">callback </span><span class="pun">=</span><span class="pln"> callbackFunction </span><span class="pun">||</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">};</span><span class="pln"><br></span><span class="pun">}</span></pre>
<h4><a name="quickIDX2"></a>Creating a new ajaxObject</h4>
<p>This AJAX snippet is a javascript object. You assign it to a variable the same
way you assign a new Array(), or new Object().  This means you can have many variables,
each one it's own little, discrete AJAX handler.  You can even make an array of Ajax objects if
you so desire. (be aware however that most browsers will only process two requests
at a time.  You can declare and start as many ajax requests as you want but only two 
requests will be processed at a time and the other requests will patiently wait their
turn until they can be processed).   

</p><p>When you create the variable assignment, you pass the URL you want that that
Ajax object to call.  (And remember, Ajax requests are bound to the same domain
as the web page.  If you're on mydomain.com you'll get an error if you try to
make an Ajax request to theirdomain.com).

</p><pre class="code" onclick="selectNode(this)"><span class="kwd">var</span><span class="pln"> myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'http://www.somedomain.com/process.php'</span><span class="pun">);</span></pre>
<h4><a name="quickIDX3"></a>Defining the Ajax Callback Function</h4>
<p>If you would like to have a procedure to process the data returned by the
server, add the function name you want to handle the request after the URL as such.

</p><pre class="code" onclick="selectNode(this)"><span class="kwd">var</span><span class="pln"> myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'http://www.somedomain.com/process.php'</span><span class="pun">,</span><span class="pln"> processData</span><span class="pun">);</span></pre>

<p>This will tell myRequest to call processData when data has come back from the server.
The first three arguments passed to processData will be responseText, responseStatus, and
responseXML respectively.  All three arguments are optional, you don't have to catch
them if you don't want, although it is highly recommended you catch responseText and
responseStatus as such...

</p><pre class="code" onclick="selectNode(this)"><span class="kwd">function</span><span class="pln"> processData</span><span class="pun">(</span><span class="pln">responseText</span><span class="pun">,</span><span class="pln"> responseStatus</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">responseStatus</span><span class="pun">==</span><span class="lit">200</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; alert</span><span class="pun">(</span><span class="pln">responseText</span><span class="pun">);</span><span class="pln"><br>&nbsp; </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; alert</span><span class="pun">(</span><span class="pln">responseStatus </span><span class="pun">+</span><span class="pln"> </span><span class="str">' -- Error Processing Request);<br>&nbsp; }<br>}</span></pre>
<p>Here processData will accept responseText and responseStatus.  If responseStatus is
200 (everything went a-ok) it will display the text from the server.  If the response was
not 200 it will display the error code and an error message.

</p><p>Passing a callback function when declaring a new ajaxObject is optional.  If you
don't pass a function to call, ajaxObject will just discard any results it gets back
from the server.   This is useful when you don't need to process any return data for
example when you're just notifying the server the mouse has passed over an object or
that the page is being unloaded.
</p><p>Having an external function to process the data is optional as well.   External
(or global) functions are useful if you have many ajax variables all calling the
same response handler but if you're doing something unique you can more tightly bind
the callback function with the ajax variable as such.
</p><pre class="code" onclick="selectNode(this)"><span class="kwd">var</span><span class="pln"> myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'http://www.somedomain.com/process.php'</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; myRequest</span><span class="pun">.</span><span class="pln">callback </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">responseText</span><span class="pun">,</span><span class="pln"> responseStatus</span><span class="pun">,</span><span class="pln"> responseXML</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; </span><span class="com">// do stuff here.</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">}</span></pre>
<p>This inserts the callback function into the object instance itself.  Note that
you can't prototype this since callback is only set up in the constructor calls or
via this method, a prototype would have no effect on new ajax constructors.
</p><h4><a name="quickIDX4"></a>Making the call:  Initiating the AJAX request.</h4>
<p>When you create your new variable assignment ajaxObject is initiated but 
no calls to the server will happen until you call the update method.  The update
method accepts two optional arguments, you can pass along some data to be sent to
the server and you can specify that data be sent as a POST instead of a GET.  (GET
basically passes all your data in the URL, POST sends it differently so all the 
data doesn't show up in the server logs, plus you can send more data with POST than
GET).
</p><p>The format is as follows...
</p><pre class="code" onclick="selectNode(this)"><span class="kwd">var</span><span class="pln"> myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'http://www.somedomain.com/process.php'</span><span class="pun">,</span><span class="pln"> processData</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; myRequest</span><span class="pun">.</span><span class="pln">update</span><span class="pun">(</span><span class="str">'id=1234&amp;color=blue'</span><span class="pun">);</span><span class="pln"> &nbsp;</span><span class="com">// Server is contacted here.</span></pre>
<p>This would initiate an ajax call to the server, passing an id of 1234 and color=blue
to the server as a GET method.  (in php it would set the variables $id and $color).
</p><p>Remember, there's no actual request to the server until the update() method is called.
Update will call the url the ajaxObject was constructed with and then, if there's a 
callback function (processData in this example) it will call that function when there's
a response from the server.
</p><h4><a name="quickIDX5"></a>Sending data as a POST in AJAX</h4>
<p>To send data to the server as a POST we'd use the following structure...
</p><pre class="code" onclick="selectNode(this)"><span class="kwd">var</span><span class="pln"> myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'http://www.somedomain.com/process.php'</span><span class="pun">,</span><span class="pln"> processData</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; myRequest</span><span class="pun">.</span><span class="pln">update</span><span class="pun">(</span><span class="str">'id=1234&amp;color=blue'</span><span class="pun">,</span><span class="str">'POST'</span><span class="pun">);</span></pre>
<p>This will send <q>id</q> and <q>color</q> to the server as a POST (in php $_POST['id'] and
$_POST['color'].  The <q>post</q> flag is not case sensitive it just needs to say post
in the string.
</p><h4><a name="quickIDX6"></a>Testing the Update()</h4>
<p>The update() method will return true if the Ajax call was successfully initialized.  It will
return false if you tried to start a new request while another request was already
outstanding. Update() will also return false if the method was unable to initialize the
browser's AJAX library (which means the browser is too old to have an xmlhttprequest object).
</p><h4><a name="quickIDX7"></a>Escape The Data</h4>
<p>The update examples above are extremely simplified.   To avoid problems with your
data containing illegal characters and quotes you should escape
the data before you pass it to update.  If you want to pass three variables, you
should at the very least prepare them as such...
</p><pre class="code" onclick="selectNode(this)"><span class="pln">passName</span><span class="pun">=</span><span class="pln">encodeURIComponent</span><span class="pun">(</span><span class="pln">name</span><span class="pun">);</span><span class="pln"><br>passAge</span><span class="pun">=</span><span class="pln">encodeURIComponent</span><span class="pun">(</span><span class="pln">age</span><span class="pun">);</span><span class="pln"><br>passJob</span><span class="pun">=</span><span class="pln">encodeURIComponent</span><span class="pun">(</span><span class="pln">job</span><span class="pun">);</span><span class="pln"><br>sendString </span><span class="pun">=</span><span class="pln"> </span><span class="str">'name='</span><span class="pun">+</span><span class="pln">passName</span><span class="pun">+</span><span class="str">'&amp;age='</span><span class="pun">+</span><span class="pln">passAge</span><span class="pun">+</span><span class="str">'&amp;job='</span><span class="pun">+</span><span class="pln">passJob</span><span class="pun">;</span><span class="pln"><br>myRequest</span><span class="pun">.</span><span class="pln">update</span><span class="pun">(</span><span class="pln">sendString</span><span class="pun">,</span><span class="str">'POST'</span><span class="pun">);</span></pre>
<p>There are three escape commands in Javascript: escape, encodeURI, and 
encodeURIComponent.   A very good explination of the three can be found
<a href="http://xkr.us/articles/javascript/encode-compare/" class="out">at xkr.us</a>.
In general however, you will want to use encodeURIComponent() and avoid escape().

</p><h4><a name="quickIDX8"></a>updating</h4>
<p>When you call the update() method the updating property is given a timestamp which
you can use to see if a call is still in progress and how long the request has 
been processing.  Here's a simple test to see if the object is updating.
</p><pre class="code" onclick="selectNode(this)"><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">myRequest</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; alert</span><span class="pun">(</span><span class="str">'this request is being processed.'</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; alert</span><span class="pun">(</span><span class="str">'this object is idle'</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span></pre>
<p>You can also see how long a request has been processing....
</p><pre class="code" onclick="selectNode(this)"><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">myRequest</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; now</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">();</span><span class="pln"><br>&nbsp; alert</span><span class="pun">(</span><span class="str">'This request is '</span><span class="pun">+</span><span class="pln">now</span><span class="pun">-</span><span class="pln">myRequest</span><span class="pun">.</span><span class="pln">updating</span><span class="pun">+</span><span class="str">' miliseconds old.'</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span></pre>

<h4><a name="quickIDX9"></a>Aborting an Ajax Request</h4>
<p>If you feel an Ajax request has gone on too long you can abort the 
request with the abort() method.   This will issue an abort command and
reset the object to an inactive state ready to accept a new update().
</p><pre class="code" onclick="selectNode(this)"><span class="pln">myRequest</span><span class="pun">.</span><span class="pln">abort</span><span class="pun">();</span></pre>
<p>If you call abort and there is no pending ajax call this method will have
no effect.

</p><h4><a name="quickIDX10"></a>Preventing Caching For Internet Explorer</h4>
<p>Even if you specify a POST method the URL will always be appended with a
timestamp ('?timestamp=123412341243').   This timestamp is the javascript julian
date integer, a number representing the number of milliseconds that have elapsed since
Midnight, January 1, 1970 GMT.  In php you can access the timestamp as $timestamp.
</p><p>By appending the julian day number to the end of the URL we effectively make
each call unique and that means Internet Explorer will not cache the Ajax call
as it is wont to do.

</p><h4><a name="quickIDX11"></a>Cool Tricks And Tips</h4>
<p>You don't actually need a server side script to use this object.   It will
pull a plain text file off your server without complaint.  Of course the
content won't be dynamic, it will just be the contents of that static file but
if you're poping up a notice, ad, or flyer in a division this is a really nice
way to get data dynamically after you've created the page.
</p><pre class="code" onclick="selectNode(this)"><span class="pln">myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'http://somedomain.com/ad.html'</span><span class="pun">);</span><span class="pln"><br>myRequest</span><span class="pun">.</span><span class="pln">callback </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">responseText</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'someAdDiv'</span><span class="pun">).</span><span class="pln">innerHTML</span><span class="pun">=</span><span class="pln">responseText</span><span class="pun">;</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br>myRequest</span><span class="pun">.</span><span class="pln">update</span><span class="pun">();</span><span class="pln"> </span></pre>
<p>Since the ajaxObject can work with static files we can use it to load
javascript libraries after the page has loaded so we can ask for them as
we need them instead of sending a huge javascript library at the start which
the user may not need.
</p><pre class="code" onclick="selectNode(this)"><span class="pln">myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'http://somedomain.com/javascriptLibrary.js'</span><span class="pun">);</span><span class="pln"><br>myRequest</span><span class="pun">.</span><span class="pln">callback </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">responseText</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; eval</span><span class="pun">(</span><span class="pln">responseText</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br>myRequest</span><span class="pun">.</span><span class="pln">update</span><span class="pun">();</span></pre>
<p>As you can see, simulating a &lt;script src='library.js'&gt; call is as simple
as passing the responseText through an eval statement (eval is basically the
javascript compiler).
</p><h4><a name="quickIDX12"></a>Multiple Ajax Calls, Ajax Concurrency, and Dynamic Flexibility</h4>
<p>The beauty of encapsulating Ajax into an object is that you can define an
Ajax request as easily as you can define a variable and keep the different requests
as discrete as you can keep the values of different variables discrete.
</p><p>Here is a simple code which defines three separate Ajax variables and binds them
to three separate rss feeds (via a server-side script).  The update method is called via links so
when a feed is clicked on, the associated ajax request is called and the response is
placed in a division named <q>feed</q>.
</p><pre class="code" onclick="selectNode(this)"><span class="kwd">function</span><span class="pln"> processFeed</span><span class="pun">(</span><span class="pln">responseText</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">responseStatus</span><span class="pun">==</span><span class="lit">200</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'feed'</span><span class="pun">).</span><span class="pln">innerHTML</span><span class="pun">=</span><span class="pln">responseText</span><span class="pun">;</span><span class="pln"><br>&nbsp; </span><span class="pun">}</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br><br></span><span class="kwd">var</span><span class="pln"> diggFeed</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'feedHandler.php'</span><span class="pun">,</span><span class="pln">processFeed</span><span class="pun">);</span><span class="pln"><br></span><span class="kwd">var</span><span class="pln"> redditFeed</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'feedHandler.php'</span><span class="pun">,</span><span class="pln">processFeed</span><span class="pun">);</span><span class="pln"><br></span><span class="kwd">var</span><span class="pln"> dzoneFeed</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'feedHandler.php'</span><span class="pun">,</span><span class="pln">processFeed</span><span class="pun">);</span><span class="pln"><br><br></span><span class="pun">&lt;</span><span class="pln">A HREF</span><span class="pun">=</span><span class="str">""</span><span class="pln"> onClick</span><span class="pun">=</span><span class="str">'diggFeed.update("feed=http://www.digg.com/rss/index.xml"); return false;'</span><span class="pun">&gt;</span><span class="typ">Get</span><span class="pln"> </span><span class="typ">Digg</span><span class="pln"> </span><span class="typ">Feed</span><span class="pun">&lt;/</span><span class="pln">A</span><span class="pun">&gt;</span><span class="pln"><br></span><span class="pun">&lt;</span><span class="pln">A HREF</span><span class="pun">=</span><span class="str">""</span><span class="pln"> onClick</span><span class="pun">=</span><span class="str">'redditFeed.update("feed=http://reddit.com/.rss"); return false;'</span><span class="pun">&gt;</span><span class="typ">Get</span><span class="pln"> </span><span class="typ">Reddit</span><span class="pln"> </span><span class="typ">Feed</span><span class="pun">&lt;/</span><span class="pln">A</span><span class="pun">&gt;</span><span class="pln"><br></span><span class="pun">&lt;</span><span class="pln">A HREF</span><span class="pun">=</span><span class="str">""</span><span class="pln"> onClick</span><span class="pun">=</span><span class="str">'dzoneFeed.update("feed=http://feeds.dzone.com/dzone/frontpage"); return false;'</span><span class="pun">&gt;</span><span class="typ">Get</span><span class="pln"> </span><span class="typ">DZone</span><span class="pln"> </span><span class="typ">Feed</span><span class="pun">&lt;/</span><span class="pln">A</span><span class="pun">&gt;</span></pre>
<h4><a name="quickIDX13"></a>Changing the calling AJAX URL</h4>
<p>After you've created an ajaxObject you can update the URL and change the callback function
if you need to by simply assigning a new ajaxObject as such… 
</p><pre class="code" onclick="selectNode(this)"><span class="kwd">var</span><span class="pln"> myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'serverScript.php'</span><span class="pun">,</span><span class="pln">callbackFunc</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; myRequest</span><span class="pun">.</span><span class="pln">update</span><span class="pun">();</span><span class="pln"><br><br></span><span class="com">// Now we're going to change the URL</span><span class="pln"><br><br>&nbsp; &nbsp; myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'newScript.php'</span><span class="pun">,</span><span class="pln"> newcallback</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; myRequest</span><span class="pun">.</span><span class="pln">update</span><span class="pun">();</span></pre>
<h4><a name="quickIDX14"></a>An Array of AJAX Objects!</h4>
<p>Just for fun…
</p><pre class="code" onclick="selectNode(this)"><span class="pln">ajaxArray</span><span class="pun">=[];</span><span class="pln"><br></span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">&lt;</span><span class="lit">10</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; ajaxArray</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'someScript.php'</span><span class="pun">,</span><span class="pln">callbackFunc</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br></span><span class="com">// Call them all at once!</span><span class="pln"><br></span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="pln">i</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">&lt;</span><span class="lit">10</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; ajaxArray</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">update</span><span class="pun">(</span><span class="str">'id='</span><span class="pun">+</span><span class="pln">i</span><span class="pun">;);</span><span class="pln"><br></span><span class="pun">}</span></pre>
<h4><a name="quickIDX15"></a>The Ultimate Ajax Object</h4>
<p>Is it the ultimate Ajax Object?  Probably not.   It is however probably one
of the better ones you're likely to find outside the major frameworks like <a href="http://jquery.com/" class="out">JQuery</a>,
<a href="http://developer.yahoo.com/yui/" class="out">YUI</a>, and <a href="http://www.prototypejs.org/" class="out">Prototype</a>.  
In addition to being public domain, it's also simple, compact and easy to get under the hood and
modify to your own uses -- to me, that makes it an ultimate.  Hopefully, for you as well.
</p><h4><a name="quickIDX16"></a>Addendum</h4>
<p>After the publication of this article, Dmitriy Sonis dropped me an email which suggested
adding a content-length header when sending data as a post, as this was a most sensible and
level-headed suggestion I complied and have added this line to the Object.  As a result,
the object should be a little bit more compatible with server-side scripts now.
</p><p>Mr. Sonis also suggested using a Curry to provide a uniform callback method.  It's a very
advanced approach but a very useful one as well.   Here is his suggestion…

</p><p><q>It makes greater sense to have a centralized CallBack
function for all AJAX request to do some initial processing, like based
on status, and then pass control to a dedicated funciton to handle a
specific functionality. This can be achieved using currying.</q>
</p><p><q>So here is my AJAX call.</q>

</p><pre class="code"><span class="kwd">var</span><span class="pln"> myRequest </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> ajaxObject</span><span class="pun">(</span><span class="str">'http://localhost/AALetters/MergeData.asmx/PutDocument'</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Curry</span><span class="pun">(</span><span class="typ">OnSaveDoc</span><span class="pun">,</span><span class="pln"> </span><span class="typ">CallBack</span><span class="pun">));</span><span class="pln"><br><br>myRequest</span><span class="pun">.</span><span class="pln">update</span><span class="pun">(</span><span class="pln">postData</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Post'</span><span class="pun">);</span></pre>
 

<p><q>Here is my custom handler.</q>

</p><pre class="code"><span class="kwd">function</span><span class="pln"> </span><span class="typ">OnSaveDoc</span><span class="pun">(){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert</span><span class="pun">(</span><span class="str">'Executing OnSaveDoc()...'</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span></pre>
 

<p><q>This is standard CallBack function.</q>

</p><pre class="code"><span class="kwd">function</span><span class="pln"> </span><span class="typ">CallBack</span><span class="pun">(</span><span class="pln">customHandler</span><span class="pun">,</span><span class="pln"> responseText</span><span class="pun">,</span><span class="pln"> status</span><span class="pun">,</span><span class="pln"> responseXML</span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="com">// Do standard processing then pass execution to dedicated function</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="com">// to handle specific tasks</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="kwd">if</span><span class="pun">(</span><span class="lit">200</span><span class="pln"> </span><span class="pun">!=</span><span class="pln"> status</span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; alert</span><span class="pun">(</span><span class="str">"Problem"</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"> &nbsp;<br>&nbsp; &nbsp; customHandler</span><span class="pun">();</span><span class="pln"><br></span><span class="pun">}</span></pre>
<p><q>And this is curry function</q>

</p><pre class="code"><span class="kwd">function</span><span class="pln"> </span><span class="typ">Curry</span><span class="pln"> </span><span class="pun">(</span><span class="pln">fn</span><span class="pun">,</span><span class="pln"> scope</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> scope </span><span class="pun">=</span><span class="pln"> scope </span><span class="pun">||</span><span class="pln"> window</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> args </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Array</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">slice</span><span class="pun">.</span><span class="pln">call</span><span class="pun">(</span><span class="pln">arguments</span><span class="pun">,</span><span class="lit">2</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; fn</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">(</span><span class="pln">scope</span><span class="pun">,</span><span class="pln"> args</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">};</span><span class="pln"><br></span><span class="pun">}</span></pre> 
<br><br><div class="noprint adBar" id="lunarAd" style="border: 1px solid black; padding: 5px; font-family: verdana; font-size: 1em; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; background-color: rgb(253, 255, 193);"><p></p><center><a href="http://www.lunarpages.com/id/hunlock2" onmouseover="window.status='http://www.lunarpages.com';return true" onmouseout="window.status='';return true" target="_blank">
						<img style="border: medium none ;" src="The_Ultimate_Ajax_Object_files/07_lunarpages_728x90.gif" alt="Lunarpages.com Web Hosting"></a></center>
<p>For many, many years now; I've used <a href="http://www.lunarpages.com/id/hunlock2" class="out">Lunarpages</a>
to host my website. In that time my rates have gone down by over 50%
and my bandwidth and disk allowances have been made unlimited -- truly
so. I've always received prompt and courteous service from them both on
the phone and on their forums. </p><p>Lunarpages offers a cheap rate but it's not a cheap service.
My site has been front-paged on Digg, Reddit, Slashdot, Ajaxian and
Del.icio.us (amongst many other high-traffic sites). Lunarpages served
my site despite the huge flood of traffic without a single fault. If
you play on Digg you know other hosting companies aren't so great. The
site crashes, or is pulled by administrators who put up nasty messages
to <q>contact billing</q>. When my site was
featured -- where other hosts
might shut down a website for being too successful -- Lunarpage's
administrators sent me a nice message congratulating me on my site's
success. I also sync several gigabytes of critical files as off-site
backup
(not in my public webspace and they're encrypted), again -- no
problems, no complaints from Lunarpages.
</p><p>Yes this is an Ad, but it's also a testimonial.  I use these guys.  I trust them with my site and my digital life.
<br clear="all">&nbsp;
</p></div>
</div>
</td>
<td id="sidebar" style="margin: 0px; padding: 5px; background: transparent url(http://www.hunlock.com/images/blue-fade-bg-left.jpg) repeat-y scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" class="noprint" align="center" valign="top">
<div id="indexBar">
<div class="indexBar">
   <div id="indexTitle" class="indexTitle">Article Index</div>
   <div id="indexContents" class="indexContents"><a href="#quickIDX0">Introduction</a><br><a href="#quickIDX1">An Object Lesson</a><br><a href="#quickIDX2">Creating a new ajaxObject</a><br><a href="#quickIDX3">Defining the Ajax Callback Function</a><br><a href="#quickIDX4">Making the call:  Initiating the AJAX request.</a><br><a href="#quickIDX5">Sending data as a POST in AJAX</a><br><a href="#quickIDX6">Testing the Update()</a><br><a href="#quickIDX7">Escape The Data</a><br><a href="#quickIDX8">updating</a><br><a href="#quickIDX9">Aborting an Ajax Request</a><br><a href="#quickIDX10">Preventing Caching For Internet Explorer</a><br><a href="#quickIDX11">Cool Tricks And Tips</a><br><a href="#quickIDX12">Multiple Ajax Calls, Ajax Concurrency, and Dynamic Flexibility</a><br><a href="#quickIDX13">Changing the calling AJAX URL</a><br><a href="#quickIDX14">An Array of AJAX Objects!</a><br><a href="#quickIDX15">The Ultimate Ajax Object</a><br><a href="#quickIDX16">Addendum</a><br></div>
</div>
<br>
</div>
<script type="text/javascript">
   if ((_articleAge > _showAds)&&(!getCookie('noads'))) {
      document.writeln("<div id='noticeBar' class='adBar'>");
      document.writeln("<div class='rssBar adBar' style='background-color: #FDFFC1; font-family: verdana;'>");
      document.writeln("<div id='noticeTitle' class='rssTitle'>Service Notice</div>");
      document.writeln("<div id='noticeContents' class='rssContents'>");
      document.writeln("<P>Articles older than "+(_showAds-1)+" days are displayed with ");
      document.writeln("ads to help offset the production costs of this site.  This article ");
      document.writeln("is "+Math.floor(_articleAge)+" days old.");
      document.writeln("<P>If you print this page, all ads and navigational items ");
      document.writeln("will be automatically removed.  You can banish all ads on this site");
      document.writeln("for the next 24 hours by <A HREF='#' onclick='noads(); return false'>clicking here</A>.");
/*
      if (screen.width<1250) {
        google_ad_width = 160;
        google_ad_height = 600;
        google_ad_format = "160x600_as";
      } else {
        google_ad_width = 336;
        google_ad_height = 280;
        google_ad_format = "336x280_as";
      }
      google_ad_client = "pub-1034476272741901";
      google_ad_type = "text_image";
      google_ad_channel = "";
      google_color_border = "000000";
      google_color_bg = "FFFFFF";
      google_color_link = "0000FF";
      google_color_text = "000000";
      google_color_url = "008000";

      document.writeln('<div><center>');
      document.write('\<script type="text/javascript" '); 
      document.write('src="http://pagead2.googlesyndication.com/pagead/show_ads.js"\>');
      document.writeln('\<\/script\>');
  */
      document.writeln('<br clear=all><center><a href="http://www.lunarpages.com/id/hunlock2" onMouseOver="window.status=\'http://www.lunarpages.com\';return true" onMouseOut="window.status=\'\';return true" target="_blank">');
	  document.writeln('<img style="border: none" src="http://www.lunarpages.com/banners/images/01_lunarpages_300x300.gif" alt="Lunarpages.com Web Hosting" /></a></center>');  
      document.writeln('</center></div>');
      document.writeln("</div><BR>");
      document.writeln("</div>");
      document.writeln("<BR></div>");
   }
</script><div id="noticeBar" class="adBar">
<div class="rssBar adBar" style="background-color: rgb(253, 255, 193); font-family: verdana;">
<div id="noticeTitle" class="rssTitle">Service Notice</div>
<div id="noticeContents" class="rssContents">
<p>Articles older than 14 days are displayed with 
ads to help offset the production costs of this site.  This article 
is 1357 days old.
</p><p>If you print this page, all ads and navigational items 
will be automatically removed.  You can banish all ads on this site
for the next 24 hours by <a href="#" onclick="noads(); return false">clicking here</a>.
<br clear="all"></p><center><a href="http://www.lunarpages.com/id/hunlock2" onmouseover="window.status='http://www.lunarpages.com';return true" onmouseout="window.status='';return true" target="_blank">
<img style="border: medium none ;" src="The_Ultimate_Ajax_Object_files/01_lunarpages_300x300.gif" alt="Lunarpages.com Web Hosting"></a></center>
</div>
</div><br>
</div>
<br>


<div id="rssBar">
<!--[if lte IE 7]><div class='adBar'><br clear=all><BR></div><![endif]-->
 <div class="rssBar">
   <div id="rssTitle" class="rssTitle">Recent Articles</div>
   <div id="rssContents" class="rssContents">
<a href="http://www.hunlock.com/blogs/Social_Javascript_%28cross-site_ajax%29">Social Javascript (cross-site ajax)</a><br>
<a href="http://www.hunlock.com/blogs/Dude%21__I_got_a_Dell%21">Dude!  I got a Dell!</a><br>
<a href="http://www.hunlock.com/blogs/Are_you_ready_for_this">Are you ready for this</a><br>
<a href="http://www.hunlock.com/blogs/Closing_The_Book_On_Javascript_Closures">Closing The Book On Javascript Closures</a><br>
<a href="http://www.hunlock.com/blogs/Essential_Javascript_--_A_Javascript_Tutorial">Essential Javascript -- A Javascript Tutorial</a><br>
<a href="http://www.hunlock.com/blogs/Deferred_Javascript">Deferred Javascript</a><br>
<a href="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference">The Complete Javascript Number Reference</a><br>
<a href="http://www.hunlock.com/blogs/Javascript_Dates-The_Complete_Reference">Javascript Dates-The Complete Reference</a><br>
<a href="http://www.hunlock.com/blogs/The_Complete_Javascript_Strings_Reference">The Complete Javascript Strings Reference</a><br>
<a href="http://www.hunlock.com/blogs/Downloading_and_Using_Vista_Web_Fonts">Downloading and Using Vista Web Fonts</a><br>
   </div>
</div>
<br>
</div>  
<div id="relatedBar">
 <div class="rssBar">
   <div id="relatedTitle" class="rssTitle">Related Atricles</div>
   <div id="relatedContents" class="rssContents">
<a href="http://www.hunlock.com/blogs/Concurrent_Ajax">Concurrent Ajax</a><br>
<a href="http://www.hunlock.com/blogs/AJAX_from_the_darkside">AJAX from the darkside</a><br>
<a href="http://www.hunlock.com/blogs/AJAX_for_n00bs">AJAX for n00bs</a><br>
<a href="http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29">Mastering JSON ( JavaScript Object Notation )</a><br>
<a href="http://www.hunlock.com/blogs/Snippets:_Synchronous_AJAX">Snippets: Synchronous AJAX</a><br>
<a href="http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript">Mastering The Back Button With Javascript</a><br>
<a href="http://www.hunlock.com/blogs/AJAX_POST-It_Notes">AJAX POST-It Notes</a><br>
<a href="http://www.hunlock.com/blogs/Social_Javascript_%28cross-site_ajax%29">Social Javascript (cross-site ajax)</a><br>
<a href="http://www.hunlock.com/blogs/Ajax_for_Everyone_%28beyond_hello_world%29">Ajax for Everyone (beyond hello world)</a><br>
<a href="http://www.hunlock.com/blogs/The_Complete_Javascript_Strings_Reference">The Complete Javascript Strings Reference</a><br>
<a href="http://www.hunlock.com/blogs/Mastering_Javascript_Arrays">Mastering Javascript Arrays</a><br>
<a href="http://www.hunlock.com/blogs/XML_For_N00bs,_AJAX_for_Gurus">XML For N00bs, AJAX for Gurus</a><br>
   </div>
 </div>
<br>
</div>
<script type="text/javascript">
   if ((_articleAge > _showAds)&&(!getCookie('noads'))) {
      document.writeln("<div id='noticeBar2' class='adBar'>");
      document.writeln("<div class='rssBar' style='background-color: #FDFFC1; font-family: verdana;'>");
      document.writeln("<div id='noticeTitle' class='rssTitle'>Service Notice</div>");
      document.writeln("<div id='noticeContents' class='rssContents'>");
      document.writeln("<P>Articles older than "+(_showAds-1)+" days are displayed with ");
      document.writeln("ads to help offset the production costs of this site.  This article ");
      document.writeln("is "+Math.floor(_articleAge)+" days old.");
      document.writeln("<P>If you print this page, all ads and navigational items ");
      document.writeln("will be automatically removed.  You can banish all ads on this site");
      document.writeln("for the next 24 hours by <A HREF='#' onclick='noads(); return false'>clicking here</A>.");
/*
      if (screen.width<1250) {
        google_ad_width = 160;
        google_ad_height = 600;
        google_ad_format = "160x600_as";
      } else {
        google_ad_width = 336;
        google_ad_height = 280;
        google_ad_format = "336x280_as";
      }
      google_ad_client = "pub-1034476272741901";
      google_ad_type = "text_image";
      google_ad_channel = "";
      google_color_border = "000000";
      google_color_bg = "FFFFFF";
      google_color_link = "0000FF";
      google_color_text = "000000";
      google_color_url = "008000";

      document.writeln('<center><div class="adBar">');
      document.write('<script type="text\/javascript" '); 
      document.write('src="http://pagead2.googlesyndication.com/pagead/show_ads.js">');
      document.writeln('<\/script></div>');     
*/
document.writeln('</div><br clear=all/><center><a href="http://www.lunarpages.com/id/hunlock2" onMouseOver="window.status=\'http://www.lunarpages.com\';return true" onMouseOut="window.status=\'\';return true" target="_blank">');
document.writeln('<img style="border: none" src="http://www.lunarpages.com/banners/images/01_lunarpages_300x300.gif" alt="Lunarpages.com Web Hosting" /></a></center>');  

      document.writeln('</center></div>');
      document.writeln("</div><BR>");
      document.writeln("</div>");
      document.writeln("<BR></div>");
   }
</script><div id="noticeBar2" class="adBar">
<div class="rssBar" style="background-color: rgb(253, 255, 193); font-family: verdana;">
<div id="noticeTitle" class="rssTitle">Service Notice</div>
<div id="noticeContents" class="rssContents">
<p>Articles older than 14 days are displayed with 
ads to help offset the production costs of this site.  This article 
is 1357 days old.
</p><p>If you print this page, all ads and navigational items 
will be automatically removed.  You can banish all ads on this site
for the next 24 hours by <a href="#" onclick="noads(); return false">clicking here</a>.
</p></div><br clear="all/"><center><a href="http://www.lunarpages.com/id/hunlock2" onmouseover="window.status='http://www.lunarpages.com';return true" onmouseout="window.status='';return true" target="_blank">
<img style="border: medium none ;" src="The_Ultimate_Ajax_Object_files/01_lunarpages_300x300.gif" alt="Lunarpages.com Web Hosting"></a></center>
</div>
</div><br>

<br>



<div id="dzoneBar">
<!--[if lte IE 7]><div class='adBar'><br clear=all><BR></div><![endif]-->
<div class="rssBar">
   <div id="dzoneTitle" class="rssTitle">My DZone Recommendations</div>
   <div id="dzoneContents" class="rssContents"><a href="http://www.dzone.com/links/rss/are_multicore_processors_here_to_stay.html" rel="nofollow">Are multicore processors here to stay?</a><br><a href="http://www.dzone.com/links/rss/enough_with_the_rainbow_tables_what_you_need_to_k.html" rel="nofollow">Enough With The Rainbow Tables: What You Need To Know About Secure Password Schemes</a><br><a href="http://www.dzone.com/links/rss/choosing_optimal_mysql_data_types.html" rel="nofollow">Choosing Optimal MySQL Data Types</a><br><a href="http://www.dzone.com/links/rss/securing_php_creating_a_secure_php_production_env.html" rel="nofollow">Securing PHP - Creating a secure PHP production environment from Source Code</a><br><a href="http://www.dzone.com/links/rss/advanced_ternary_conditions_in_javascript.html" rel="nofollow">Advanced ternary conditions in JavaScript</a><br><a href="http://www.dzone.com/links/rss/caching_your_pages_with_php.html" rel="nofollow">Caching your pages with PhP</a><br><a href="http://www.dzone.com/links/rss/learn_python_in_10_minutes.html" rel="nofollow">Learn Python in 10 minutes</a><br><a href="http://www.dzone.com/links/rss/getting_started_with_jquery.html" rel="nofollow">Getting Started with jQuery</a><br><a href="http://www.dzone.com/links/rss/using_delicious_in_ways_you_havent_thought_of_bef.html" rel="nofollow">Using delicious in ways you haven't thought of before...</a><br><a href="http://www.dzone.com/links/rss/the_new_dzone_feed_widget_dzonelive.html" rel="nofollow">The New DZone Feed Widget: DZoneLive</a><br><a href="http://www.dzone.com/links/rss/oneline_javascript_memoization.html" rel="nofollow">One-Line JavaScript Memoization</a><br><a href="http://www.dzone.com/links/rss/how_google_translates_without_understanding.html" rel="nofollow">How Google translates without understanding</a><br><a href="http://www.dzone.com/links/rss/are_multicore_processors_the_root_of_a_new_softwa.html" rel="nofollow">Are Multicore Processors the Root of a New Software Crisis?</a><br><a href="http://www.dzone.com/links/rss/javascript_create_advanced_web_applications_with.html" rel="nofollow">JavaScript: Create Advanced Web Applications With Object-Oriented Techniques</a><br><a href="http://www.dzone.com/links/rss/why_visual_basic_6_was_frozen.html" rel="nofollow">Why Visual Basic 6 was frozen</a><br><a href="http://www.dzone.com/links/rss/introducing_robotsnocontent_for_page_sections.html" rel="nofollow">Introducing Robots-Nocontent for Page Sections</a><br><a href="http://www.dzone.com/links/rss/what_happens_in_quirks_mode_in_web_browsers.html" rel="nofollow">What happens in Quirks Mode in web browsers?</a><br><a href="http://www.dzone.com/links/rss/combine_css_with_js_and_make_it_into_a_single_dow.html" rel="nofollow">Combine CSS with JS and make it into a single download!</a><br><a href="http://www.dzone.com/links/rss/microsofts_windows_api.html" rel="nofollow">Microsoft's Windows API</a><br><a href="http://www.dzone.com/links/rss/intro_to_yahoo_maps_api.html" rel="nofollow">Intro To Yahoo Maps API</a><br><a href="http://www.dzone.com/links/rss/faster_page_loads_with_image_concatenation.html" rel="nofollow">Faster Page Loads With Image Concatenation</a><br><a href="http://www.dzone.com/links/rss/how_to_make_a_google_gadget_in_15_minutes_or_less.html" rel="nofollow">How to make a Google Gadget in 15 minutes or less</a><br><a href="http://www.dzone.com/links/rss/advancing_javascript_with_librariesvideo.html" rel="nofollow">Advancing JavaScript with Libraries-Video</a><br><a href="http://www.dzone.com/links/rss/why_jquery_is_the_answer.html" rel="nofollow">Why jQuery is The Answer</a><br><a href="http://www.dzone.com/links/rss/the_django_solution_to_the_back_button_after_logo.html" rel="nofollow">The Django solution to the "back button after logout" problem</a><br></div>
</div>
</div>
<br>
<div id="delBar" class="rssBar">
   <div id="delTitle" class="rssTitle">My Del.icio.us Recommendations</div>
   <div id="delContents" class="rssContents"><a href="http://www.hunlock.com/blogs/Social_Javascript_%28cross-site_ajax%29" rel="nofollow">social javascript (cross-side ajax)</a><br><a href="http://www.vcasmo.com/video/osnow/391" rel="nofollow">vcasmo - high-performance javascript: why everything you’ve been taught is wrong</a><br><a href="http://www.khankennels.com/blog/index.php/archives/2007/04/20/getting-joins" rel="nofollow">sql joins</a><br><a href="http://www.matasano.com/log/958/enough-with-the-rainbow-tables-what-you-need-to-know-about-secure-password-schemes/" rel="nofollow">matasano chargen » enough with the rainbow tables: what you need to know about secure password schemes</a><br><a href="http://poignantguide.net/ruby/index.html" rel="nofollow">why's (poignant) guide to ruby</a><br><a href="http://www.jeshderox.com/?view=XXX_09NNN/" rel="nofollow">jesh de rox</a><br><a href="http://video.yahoo.com/video/play?vid=cccd4aa02a3993ab06e56af731346f78.1710507" rel="nofollow">douglas crockford: "the javascript programming language"/1 of 4</a><br><a href="http://www.youtube.com/watch?v=gdAKgJDahzw" rel="nofollow">the real computer monster</a><br><a href="http://imgs.xkcd.com/comics/online_communities.png" rel="nofollow">online_communities.png (png image, 1024x968 pixels)</a><br><a href="http://www.codinghorror.com/blog/archives/000850.html" rel="nofollow">coding horror: an initiate of the bayesian conspiracy</a><br></div>
</div>

</td></tr>
</tbody></table>
    <div id="footer" class="footer" style="float: right;">
<div style="float: left; width: 100px; font-family: verdana;" class="noprint">
<div style="background-color: black; color: white;"><center>Feeds</center></div>
<a href="http://www.hunlock.com/feed.php" style="text-decoration: none; color: blue;"><img src="The_Ultimate_Ajax_Object_files/rss.gif" width="16" border="0" height="16"> RSS 2.0</a><br>
<a href="http://www.hunlock.com/feed.php?format=json&amp;callback=jsonFeed" style="text-decoration: none; color: blue;"><img src="The_Ultimate_Ajax_Object_files/json.gif" width="16" border="0" height="16"> JSON</a> <a href="http://www.hunlock.com/examples/json.txt" style="text-decoration: none; color: blue;">[?]</a><br>
</div>
       This article is copyright © 2006, 2007 by <a href="mailto:nospam@notreal.gov" onclick='document.location.href="mailto:pat"+"rick@"+"hun"+"lock.com"; return false;'>Patrick Hunlock</a>.<br>
The example code and concepts, unless otherwise noted, are released
into the public domain and may be used and modified without
compensation or attribution.<br>
			 <span class="noprint">The <a href="http://www.brandspankingnew.net/archive/2006/12/hohoho.html" class="out">Mini Icons 2</a> are used under a Creative Commons License.
       <a href="http://code.google.com/p/google-code-prettify/" class="out">Google's Code Prettifier</a> is used under the Apache 2.0 license.</span> 
    </div>
     
  
    <script type="text/javascript" src="The_Ultimate_Ajax_Object_files/pcx99"></script>    
    <script type="text/javascript">
       clockID = document.getElementById('clock');
       doClock();
function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		elm['on' + evType] = fn;
	}
}

     function startup() {
       els = document.getElementsByTagName('pre');
       for (i=0; i<els.length; i++) {
          addEvent(els[i], 'mouseup', selectNode2, false);
          addEvent(els[i], 'mousedown', unSelectNode, false);
       }
       getFeed('http://www.dzone.com/feed/shared/209881/rss.xml','dzone');

       var lad = new ajaxObject('lunarAd','/lunarad.txt');
       lad.update();

       // Insert the delicious results.
       
       Delicious = Delicious || {};
       var tmp='';
       for (var i=0, post; post = Delicious.posts[i]; i++) {
          tmp+='<a href="'+Delicious.posts[i].u+'" rel="nofollow">'+Delicious.posts[i].d.toLowerCase()+'</a><br>';
       }
       document.getElementById('delContents').innerHTML=tmp;
    }

   
    els=document.getElementsByTagName('h4');
    idx='';
    for (i=0; i<els.length; i++) {
       idx += '<a href="#quickIDX'+i+'">'+els[i].innerHTML+'</a><BR>';
       els[i].innerHTML='<a name="quickIDX'+i+'"></a>'+els[i].innerHTML;
    }
    if (!els.length) {
       document.getElementById('indexBar').style.display='none';
    } else {
       document.getElementById('indexContents').innerHTML=idx;
    }

		var contact = new ajaxObject('contact','includes/getcontact.php');
    contact.callback= function(dat) { contactCallback(dat); } 

function getFeed(feed, callback) {
var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback='+callback+'&feed='+feed;
document.getElementsByTagName("head")[0].appendChild(newScript);
}


function dzone(feed) {
   var tmp='';
   for (var i=0; i<feed.value.items.length; i++) {
      tmp+='<a href="'+feed.value.items[i].link+'" rel="nofollow">';
      tmp+=feed.value.items[i].title+'</a><br>';
   }
   document.getElementById('dzoneContents').innerHTML=tmp;
}

if (getCookie('noads')) {
   var el = getCSSRule('.adBar');
       el.style.display='none';
}

     registerOnLoad(startup);
    
    </script>
    <script type="text/javascript" src="The_Ultimate_Ajax_Object_files/prettify040107.js"></script>
  

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17525750-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

  </body></html>